<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- content -->
        <view class="max-w-[1297px] mx-auto">
            <view class="max-md:px-[5px]">
                <view class="flex items-center gap-[10px] h-[60px] mt-[15px]">
                    <view class="font-bold text-3xl">{{ $t("block.title") }}</view>
                    <view class="text-[#6c757d] text-[13px] min-w-[40px]">#{{ height }}</view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="flex items-end mt-[40px] max-md:mt-[20px]">
                    <view class="flex items-center gap-[10px]">
                        <view class="block-button-blue">{{ $t("block.btn1") }}</view>
                    </view>
                </view>
                <view class="mt-[15px] min-h-[650px] max-md:px-[5px]">
                    <uni-group v-if="data.length > 0" mode="card">
                        <view class="flex flex-col gap-[25px]">
                            <view
                                v-for="v in data"
                                class="grid grid-cols-6 gap-[130px] items-center max-md:gap-[120px]"
                            >
                                <view class="text-[#6C757d] flex items-center gap-[5px]">
                                    <view>
                                        <up-icon name="question-circle" />
                                    </view>
                                    <view class="min-w-[110px] max-md:min-w-[100px]">
                                        {{ v.title }}
                                    </view>
                                </view>
                                <view class="col-span-5 break-words">{{ v.value }}</view>
                            </view>
                        </view>
                    </uni-group>
                    <view v-else>
                        <z-paging-empty-view />
                    </view>
                </view>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>
<script setup>
import { ref } from "vue"
import { getBlockByHeight } from "@/api/common"
import { onLoad } from "@dcloudio/uni-app"
import { useI18n } from "vue-i18n"
import { timeFormat } from "@/utils/tools"

const { t } = useI18n()

let height = 0
const data = ref([])

const getBlockByHeightFunc = async () => {
    try {
        const res = await getBlockByHeight({ height })
        data.value = [
            { title: t("block.detail1"), value: res.height },
            { title: t("block.detail2"), value: res.group_height },
            { title: t("block.detail3"), value: res.group_height_growth },
            { title: t("block.detail4"), value: res.time ? timeFormat(res.time) : "" },
            { title: t("block.detail5"), value: (res.reward / 100000000).toFixed(4) + " HNY" },
            { title: t("block.detail6"), value: res.ntx },
            { title: t("block.detail7"), value: res.gas },
            { title: t("block.detail8"), value: res.merkle_root },
            { title: t("block.detail9"), value: res.witness },
            { title: t("block.detail10"), value: res.nextblockhash },
            { title: t("block.detail11"), value: ["否", "是"][res.destroy] }
        ]
    } catch (error) {
        console.log(error)
    }
}

onLoad((options) => {
    if (options?.height) {
        height = options.height
    }
    getBlockByHeightFunc(options.height)
})
</script>
